<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery图像照片剪裁插件Jcrop</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/css/shangjia-ued.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript" src="/js/lib/jquery.js"></script>
<script type="text/javascript" src="/js/plugin/jcrop/jquery.Jcrop.js"></script>
<script type="text/javascript" src="/js/plugin/imageProportion/jquery.imageProportion.js"></script>
</head>
<body>
<div class="crop_box">
	<div class="crop_img">
		<img id="jcropImg" class="imageProportion" src="images/xuwanting.jpg"/>
	</div>
	<div id="jcropImgShowBox" class="crop_preview">
		<input type="hidden" id="jcrop_x" />
		<input type="hidden" id="jcrop_y" />
		<input type="hidden" id="jcrop_x2" />
		<input type="hidden" id="jcrop_y2" />
		<input type="hidden" id="jcrop_w" />
		<input type="hidden" id="jcrop_h" />
		<img id="jcropImgShow" src="images/xuwanting.jpg" />
	</div>
</div>
<div>
<button onclick="alert($('#jcropImgShowBox').html())">提交</button><button>重置</button></div>
<script type="text/javascript">
$(document).ready(function(){
	//触发调整大小事件
	imageProportion({
		dom:$("#jcropImg"),
		maxWidth:300,
		maxHeight:300,
		callback:function(){
			//触发裁剪事件
			var newJcrop = $("#jcropImg").Jcrop({
				onChange:showPreview,
				onSelect:showPreview,
				setSelect:[0,0,120,120],
				aspectRatio:1
			});	
		}
	})
	
});

//处理右边预览
function showPreview(coords){
	if(parseInt(coords.w) > 0){
		var img = $("#jcropImg");//计算预览区域图片缩放的比例
		var imgShow = $("#jcropImgShow");
		var imgShowBox = $("#jcropImgShowBox");
		var rx = imgShowBox.width() / coords.w; 
		var ry = imgShowBox.height() / coords.h;
		imgShow.css({//通过比例值控制图片的样式与显示
			width:Math.round(rx * img.width()) + "px",	//预览图片宽度为计算比例值与原图片宽度的乘积
			height:Math.round(rx * img.height()) + "px",	//预览图片高度为计算比例值与原图片高度的乘积
			marginLeft:"-" + Math.round(rx * coords.x) + "px",
			marginTop:"-" + Math.round(ry * coords.y) + "px"
		});
		imgShowBox.find("#jcrop_x").val(coords.x);
		imgShowBox.find("#jcrop_y").val(coords.y);
		imgShowBox.find("#jcrop_x2").val(coords.x2);
		imgShowBox.find("#jcrop_y2").val(coords.y2);
		imgShowBox.find("#jcrop_w").val(coords.w);
		imgShowBox.find("#jcrop_h").val(coords.h);
	}
}

</script>
</body>
</html>
